<template>
  <view>
    <view class="">
      <view class="revenList flex justify-between">
        <view class="border-10 " style="width: 187rpx;height: 73rpx; background-color: #363f51;"
          v-for="(item,index) in revenue" :key="index" :class="{'active':current === index}" @click="checked(index)">
          <view>
            {{item.title}}
          </view>
        </view>
      </view>
      <view class="">
        <view class="" v-if="current=== 0">
          <orderIndex :orderList="orderList"></orderIndex>
          <pagination :total="total" :queryParams="queryParams" @changeAdd="add" @reset="reset" @changeNum="change">
          </pagination>
        </view>
        <!--  <view class="" v-if="current=== 1">
          <abnormalRecord></abnormalRecord>
        </view> -->
        <view class="" v-if="current=== 1">
          <invoice :invoiceList="invoiceList"></invoice>
          <pagination v-if="invoiceTotal>0" :total="invoiceTotal" :queryParams="invoiceQueryParams"
            @changeAdd="invoiceAdd" @reset="invoiceReset" @changeNum="invoiceChange"></pagination>
        </view>
      </view>
    </view>


  </view>
</template>

<script>
  import orderIndex from '@/adminList/orderManagement/component/index.vue'
  import abnormalRecord from '@/adminList/orderManagement/component/abnormalRecord.vue'
  import invoice from '@/adminList/orderManagement/component/invoice.vue'
  import {
    listOrder
  } from "@/api/order/order";
  import {
    listStation
  } from '@/api/pile/station.js'
  import {
    copy
  } from '@/common/copy.js'
  import {
    listInvoice
  } from "@/api/order/invoice";
  export default {
    components: {
      orderIndex,
      abnormalRecord,
      invoice
    },
    data() {
      return {
        revenue: [{
            index: '1',
            title: '充电订单'
          },
          // {
          //   index: '2',
          //   title: '订单异常记录'
          // },
          {
            index: '2',
            title: '申请开票'
          }
        ],
        current: 0,
        text: null,
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
        invoiceTotal: 0,
        invoiceQueryParams: {
          pageNum: 1,
          pageSize: 10
        },
        orderList: [],
        invoiceList: []
      };
    },
    methods: {
      add() {
        console.log('add事件');
        this.orderList = []
        this.queryParams.pageSize += 10
        console.log(this.queryParams.pageSize, '添加');
        this.getList()
      },
      reset() {
        console.log('reset 事件');
        this.orderList = []
        this.queryParams.pageSize = 10
        this.queryParams.pageNum = 1
        this.getList()
      },
      change(e) {
        this.queryParams.pageNum = e
        this.getList()
      },
      invoiceAdd() {
        console.log('add事件');
        this.invoiceList = []
        this.invoiceQueryParams.pageSize += 10
        console.log(this.invoiceQueryParams.pageSize, '添加');
        this.getInvoice()
      },
      invoiceReset() {
        console.log('reset 事件');
        this.invoiceList = []
        this.invoiceQueryParams.pageSize = 10
        this.invoiceQueryParams.pageNum = 1
        this.getInvoice()
      },
      invoiceChange(e) {
        this.invoiceQueryParams.pageNum = e
        this.getInvoice()
      },
      // 发票列表请求
      getInvoice(fn) {
        listInvoice(this.invoiceQueryParams).then(response => {
          fn && fn()
          this.invoiceList = [...this.invoiceList, ...response.rows];
          this.invoiceTotal = response.total;
        });
      },
      checked(index) {
        this.current = index
        this.text = this.revenue[index].title
        console.log('营收页面', this.current);
      },
      copy111(value) { // 复制订单号
        copy(value)
      },
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.orderList = []
        this.invoiceList = []
        if (this.current === 0) return this.getList();
        this.getInvoice()
        // 获取订单总金额
        // this.getOrderTotalData();
      },
      bindPickerChange(e) {
        this.index = e.detail.value
        this.queryParams.stationId = this.stationList[this.index].id
        this.handleQuery()
      },
      statusChange(e) {
        this.dictValue = e.detail.value
        console.log(this.dictValue);
        this.queryParams.orderStatus = this.dictValue
        console.log(this.queryParams.orderStatus, '订单状态');
        this.handleQuery()

      },
      getList(fn) {
        console.log(this.queryParams, 'getList 请求');
        listOrder(this.queryParams).then(response => {
          console.log('response', response);
          fn && fn()
          this.orderList = [...this.orderList, ...response.rows]
          console.log('order里面的参数', this.orderList, response.total)
          this.total = response.total;
        });
      },
      /** 查询充电站信息列表 */
      getStationList() {
        const queryStationParams = {
          pageNum: 1,
          pageSize: 10
        };
        listStation(queryStationParams).then((response) => {
          console.log("订单列表页-查询站点列表", response)
          this.stationList = response.rows;
        });

      },
      async dataLoading() {
        console.log("加载订单列表页数据...")
        await this.getList()
        this.getInvoice()
        // 获取订单总金额
        // this.getOrderTotalData();
      },
    },
    onLoad() {
      this.dataLoading()
    },
    onPullDownRefresh() {
      if (this.current === 1) {
        this.invoiceQueryParams.pageNum = 1
        this.invoiceList = []
        this.getInvoice(uni.stopPullDownRefresh)
        return
      }
      this.queryParams.pageNum = 1
      this.orderList = []
      this.getList(uni.stopPullDownRefresh)
    },
  }
</script>

<style lang="scss" scoped>
  .active {
    background-color: red !important;
    // background-color: red !important;
  }

  .btn-view {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 28%;
    background-color: #040f25;
    color: #fff;
  }

  .content {
    padding-bottom: calc(var(--window-bottom) + 420rpx);
  }

  .order-bd {
    width: 152rpx;
    height: 152rpx;
    border-radius: 50%;
    text-align: center;
    line-height: 152rpx;
  }

  .order-section {
    width: 219rpx;
    height: 55rpx;
    border-radius: 28rpx;
    text-align: center;
    line-height: 55rpx;
  }

  .revenList {
    padding: 40rpx 34rpx 0 37rpx;
    text-align: center;
    line-height: 72rpx;
  }

  .active {
    position: relative;
    // color: #fff;
    // border-radius: 10rpx;
    background-color: #040f26 !important;
    // background-color: red !important;
  }

  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>